<template>
	<view>
		<!-- 产品推荐 -->
		<scroll-view class="gui-scroll-x gui-scroll-cards" scroll-x :show-scrollbar="false">
			<view class="my-gui-scroll-x-items gui-columns gui-flex-vcenter mx-2-5 my-2" v-for="(item, index) in shops" :key="index">
				<view class="gui-scroll-cards-box fx-f-ajc"><image class="gui-scroll-cards-image" src="/static/images/shop-01.png" mode="widthFix"></image></view>
				<view class="gui-scroll-cards-txt">{{ item.txt }}</view>
			</view>
		</scroll-view>
		<!-- 产品轮播 -->
		<view class="my-3">
			<guiComSwiper
				:swiperItems="swiperItems"
				:width="750"
				:height="370"
				borderRadius="15rpx"
				indicatorPosition="relative"
				indicatorColor="rgba(216, 228, 231, 1)"
				indicatorActiveColor="#FB7E22"
				:padding="26"
				:spacing="35"
			></guiComSwiper>
		</view>
		<!-- 产品 -->
		<scroll-view class="gui-scroll-x mt-4" :show-scrollbar="false" scroll-x>
			<view class="shop-box white-space gui-scroll-x-items fx-f-ajc pb-8 gui-bg-white mr-0">
				<view @tap="pageFn.navigateToQueryFn('/pages/cartBox/shopInfo/index', 2)">
					<view class="height-200 width-full fx-f-ajc"><image class="shop-img" src="/static/images/shop-01.png" mode="widthFix"></image></view>
					<view class="shop-des box-shadow main-banner-color-linear3">
						<view class="height-100"></view>
						<view class="fx-f-jsb fx-f mx-2">
							<view class="gui-bold">
								<view class="gui-h6 height-40">麻阳</view>
								<view class="gui-h6 height-40">冰糖橙</view>
								<text class="gui-text-small btc-black6">￥47</text>
							</view>
							<view class="pb-1 fx-f fx-a-e"><text class="gui-badge gui-color-white main-bg-color px-2 py-1 ali-icon">&#xe6cf;</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="shop-box white-space gui-scroll-x-items fx-f-ajc pb-8 gui-bg-white mr-0">
				<view @tap="pageFn.navigateToQueryFn('/pages/cartBox/shopInfo/index', 2)">
					<view class="height-200 width-full fx-f-ajc"><image class="shop-img" src="/static/images/shop-01.png" mode="widthFix"></image></view>
					<view class="shop-des box-shadow main-banner-color-linear3">
						<view class="height-100"></view>
						<view class="fx-f-jsb fx-f mx-2">
							<view class="gui-bold">
								<view class="gui-h6 height-40">麻阳</view>
								<view class="gui-h6 height-40">冰糖橙</view>
								<text class="gui-text-small btc-black6">￥47</text>
							</view>
							<view class="pb-1 fx-f fx-a-e"><text class="gui-badge gui-color-white main-bg-color px-2 py-1 ali-icon">&#xe6cf;</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="shop-box white-space gui-scroll-x-items fx-f-ajc pb-8 gui-bg-white mr-0">
				<view @tap="pageFn.navigateToQueryFn('/pages/cartBox/shopInfo/index', 2)">
					<view class="height-200 width-full fx-f-ajc"><image class="shop-img" src="/static/images/shop-01.png" mode="widthFix"></image></view>
					<view class="shop-des box-shadow main-banner-color-linear3">
						<view class="height-100"></view>
						<view class="fx-f-jsb fx-f mx-2">
							<view class="gui-bold">
								<view class="gui-h6 height-40">麻阳</view>
								<view class="gui-h6 height-40">冰糖橙</view>
								<text class="gui-text-small btc-black6">￥47</text>
							</view>
							<view class="pb-1 fx-f fx-a-e"><text class="gui-badge gui-color-white main-bg-color px-2 py-1 ali-icon">&#xe6cf;</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="shop-box white-space gui-scroll-x-items fx-f-ajc pb-8 gui-bg-white mr-0">
				<view @tap="pageFn.navigateToQueryFn('/pages/cartBox/shopInfo/index', 2)">
					<view class="height-200 width-full fx-f-ajc"><image class="shop-img" src="/static/images/shop-01.png" mode="widthFix"></image></view>
					<view class="shop-des box-shadow main-banner-color-linear3">
						<view class="height-100"></view>
						<view class="fx-f-jsb fx-f mx-2">
							<view class="gui-bold">
								<view class="gui-h6 height-40">麻阳</view>
								<view class="gui-h6 height-40">冰糖橙</view>
								<text class="gui-text-small btc-black6">￥47</text>
							</view>
							<view class="pb-1 fx-f fx-a-e"><text class="gui-badge gui-color-white main-bg-color px-2 py-1 ali-icon">&#xe6cf;</text></view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import guiComSwiper from '@/components/guiCom/gui-swiper.vue';
export default {
	data() {
		return {
			// 热门店铺
			shops: [
				{
					face: '/static/images/home/shop-01.png',
					txt: '京东',
					shopId: 1
				},
				{
					face: '/static/images/home/shop-01.png',
					txt: '京东',
					shopId: 1
				},
				{
					face: '/static/images/home/shop-01.png',
					txt: '京东',
					shopId: 1
				},
				{
					face: '/static/images/home/shop-01.png',
					txt: '京东',
					shopId: 1
				},
				{
					face: '/static/images/home/shop-01.png',
					txt: '当当',
					shopId: 2
				},
				{
					face: '/static/images/home/shop-01.png',
					txt: '天猫',
					shopId: 4
				}
			],
			// 轮播图
			swiperItems: [
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/1.png',
					url: '',
					title: '测试标题 001',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
					url: '',
					title: '测试标题 02',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
					url: '',
					title: '测试标题 02',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
					url: '',
					title: '测试标题 02',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
					url: '',
					title: '测试标题 02',
					opentype: 'navigate'
				}
			]
		};
	},
	onReady: function() {},
	onLoad: function(option) {},
	methods: {},
	components: {
		guiComSwiper
	}
};
</script>
<style lang="scss" scoped>
/*  中间内容 */


	.my-gui-scroll-x-items {
		display: inline-flex;
		width: 110rpx;
		height: 160rpx;
		font-size: 0;
		margin-right: 10rpx;

		.gui-scroll-cards-box {
			width: 100rpx;
			height: 100rpx;
			flex-shrink: 0;
			border-radius: 10rpx;
			background-color: #f3f6f6;
		}

		.gui-scroll-cards-image {
			width: 70rpx;
			height: 70rpx;
		}

		.gui-scroll-cards-txt {
			text-align: center;
			color: #c6c6c6;
			font-size: 26rpx;
			margin-top: 20rpx;
			line-height: 36rpx;
		}
	}

	/*  单个商品  首页*/
	.shop-box {
		display: inline-flex;
		width: 300rpx;
		height: 345upx;

		.shop-des {
			width: 240rpx;
			height: 240rpx;
			margin-top: -100rpx;
			border-radius: 10px;
		}

		.shop-img {
			width: 240rpx;
			height: 240rpx;
		}
	}


</style>
